<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String ctx = request.getContextPath();
    request.setAttribute("ctx", ctx);
%>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        function fenye(cpage) {
            $("[name='cpage']").val(cpage);
            $("form").submit();
        }
    </script>
</head>
<body>
<h1>父子级</h1>
    <form method="post" action="list.do">
        <input type="hidden" name="cpage">
        姓名： <input type="text" name="sname" value="${map.sname}"><br>
        生日：<input type="text" name="birtdayStar" value="${map.birthdayStar}">---<input type="text" name="birthdayend" value="${map.birthdayend}"><br>
        性别：<input type="radio" name="sex" value="男" ${map.sex=='男'?'checked':''}>男
                <input type="radio" name="sex" value="女" ${map.sex=='女'?'checked':''}>女<br>
        籍贯：<select name="sheng">
                <option value="">请选择</option>
                </select>
                    <select name="shi">
                        <option value="">请选择</option>
                    </select>
                    <select name="xian">
                        <option value="" >请选择</option>
                    </select>
                    <br>
       课程:<div id="courses">
                </div>
        <input type="submit" >
    </form>
    <table>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>爱好</td>
            <td>生日</td>
            <td>课程</td>
            <td>籍贯</td>
            <td>图片</td>
            <td>

                <input type="button" value="添加" onclick="toadd()">
            </td>
        </tr>
        <c:forEach items="${pageInfo.list}" var="stu">
            <tr>
                <td>${stu.sid}</td>
                <td>${stu.sname}</td>
                <td>${stu.sex}</td>
                <td>${stu.hobby}</td>
                <td>${stu.birthday}</td>
                <td>${stu.cnames}</td>
                <td>${stu.shengName}-${stu.shiName}-${stu.xianName}</td>
                <td>
                    <img alt="无法展示" src="${stu.pic}" width="150px">
                </td>
                <td></td>
            </tr>
        </c:forEach>
        <tr>
            <td colspan="11">
                <input type="button" value="首页" onclick="fenye(1)">
                <input type="button" value="上一页" onclick="fenye(${pageInfo.isFirstPage?1:pageInfo.prePage})">
                <input type="button" value="下一页" onclick="fenye(${pageInfo.isLastPage?pageInfo.pages:pageInfo.nextPage})">
                <input type="button" value="尾页" onclick="fenye(${pageInfo.pages})">
            </td>
        </tr>
    </table>

</body>
<script>

    function toadd() {
        location="toadd.do";
    }
    // 课程加载ajax
    $.ajax({
        url:"courseList.do",
        type:"post",
        dataType:"json",
        success:function (obj){
            // 能否 一个循环完成？？？？
            for (let x in obj) {
                $("#courses").append(" <input type='checkbox' name='cids' value="+obj[x].cid+">"+obj[x].cname)
            }
            var cids="${map.cids}".split(",")
            for(var i in cids){
                $("[name='cids'][value='"+cids[i]+"']").prop("checked",true);
            }
        }
    })
    //三级联动
    $.ajax({
        url:"cityList.do",
        type:"post",
        dataType:"json",
        data:{"pid":0},
        success:function (obj) {
            for (let x in obj) {
                if(obj[x].id=="${map.sheng}"){
                    $("[name='sheng']").append('<option value='+obj[x].id+' selected>'+obj[x].name+'</option>')
                    $("[name='sheng']").trigger();
                }else{
                    $("[name='sheng']").append('<option value='+obj[x].id+'>'+obj[x].name+'</option>')
                }

            }
        }
    })



    $("[name='sheng']").change(function (){
        var pid=$(this).val();
        $("[name='shi']").empty()
        $("[name='shi']").append("<option value=''>请选择</option>")
        $("[name='xian']").empty()
        $("[name='xian']").append("<option value=''>请选择</option>")

        $.ajax({
            url:"cityList.do",
            type:"post",
            dataType:"json",
            data:{"pid":pid},
            success:function (obj) {
                for (let x in obj) {
                    if(obj[x].id=="${map.shi}"){
                        $("[name='shi']").append('<option value='+obj[x].id+' selected>'+obj[x].name+'</option>')
                        $("[name='shi']").trigger();
                    }else{
                        $("[name='shi']").append('<option value='+obj[x].id+'>'+obj[x].name+'</option>')
                    }
                }
            }
        })
    })

    $("[name='shi']").change(function (){
        var pid=$(this).val();
        $("[name='xian']").empty()
        $("[name='xian']").append("<option value=''>请选择</option>")
        $.ajax({
            url:"cityList.do",
            type:"post",
            dataType:"json",
            data:{"pid":pid},
            success:function (obj) {
                for (let x in obj) {
                    if(obj[x].id=="${map.xian}"){
                        $("[name='xian']").append('<option value='+obj[x].id+' selected>'+obj[x].name+'</option>')
                    }else{
                        $("[name='xian']").append('<option value='+obj[x].id+'>'+obj[x].name+'</option>')
                    }
                }
            }
        })
    })



</script>
</html>
